<template>
	<view class="nav_outer">
		<view class="bigBox">
			<view class="topStyle"></view>
			<view class="Content">
				<view class="leftContent">
					<view class="topRegistration">
						<view
							class="leftTitle"
							style="font-size: 35rpx; color: #000; font-weight: bolder"
						>
							<!-- <text class="sizeStyle"> 专 </text
							> -->
							{{ doctorMessage.deptName }}</view
						>
					</view>
					<view class="introduce">
						<view
							class="box"
							style="font-size: 30rpx; color: #000; font-weight: bolder"
							>{{ doctorMessage.doctorName }}</view
						>
						<view style="color: #cccccc">{{ doctorMessage.deptName }}</view>
						<view>{{ position }}</view>
					</view>
					<view class="men">
						<!-- <view>{{ parentOrgName }}</view> -->
					</view>
					<view class="beGood">
						<view style="font-size: 30rpx; color: #000; font-weight: bolder"
							>擅长：</view
						><view class="conceal">{{ doctorMessage.doctorMajor }}</view>
						<!-- <view style="color: #3e97e4">详情</view> -->
					</view>
					<view @click="homepage">
						<u-section
							class="contentList"
							title="医生主页"
							:show-line="false"
							:bold="false"
							sub-title=" "
						></u-section>
					</view>
				</view>
				<!-- <view class="headImg"> -->
				<img class="headImg" :src="doctorMessage.doctorIcon" alt="" />
				<!-- </view> -->
			</view>
		</view>
		<!-- 选择日期 -->
		<view style="padding: 0 12px; margin-top: 10px">
			<view
				><u-icon name="plus-square-fill" color="#5690FB" size="28"></u-icon
				>选择的当前日期</view
			>
			<view class="dateTop">
				<u-calendar
					ref="calendar"
					v-model="showDate"
					:min-date="getTime(1)"
					:max-date="getTime(7)"
					@change="changeTime"
				></u-calendar>
				<view @click="showDate = true" class="date_new">{{ newDate }}</view>
			</view>
		</view>
		<!-- 时间选择 -->
		<view style="padding: 0 25rpx; margin-top: 20rpx; margin-bottom: 100px">
			<view v-if="titleShow">
				<!-- <view v-if="allDate.length < 1"> -->
				<view v-if="forenoon.length > 0">
					<view>上午时间 </view>
					<view class="timeResidue">
						<view
							:class="{ timeList: forenoonIdx == index }"
							v-for="(item, index) in forenoon"
							:key="index"
							@click="forenoonClick(index, item)"
						>
							{{ item.startTime }}
						</view>
					</view>
				</view>
				<view v-if="afternoon.length > 0">
					<view>下午时间 </view>
					<view class="timeResidue">
						<view
							:class="{ timeList: afternoonIdx == index }"
							v-for="(item, index) in afternoon"
							:key="index"
							@click="afternoonClick(index, item)"
						>
							{{ item.startTime }}
						</view>
					</view>
				</view>

				<!-- 夜间时间 -->
				<view v-if="residue.length > 0">
					<view>夜间 </view>
					<view class="timeResidue">
						<view
							:class="{ timeList: idx == index }"
							v-for="(item, index) in residue"
							:key="index"
							@click="timeClick(item, index)"
							>{{ item.startTime }}</view
						>
					</view></view
				>
				<!-- </view> -->

				<!-- 全天 -->
				<!-- <view v-else> -->
				<view v-if="allDate.length > 0">
					<view>全天 </view>
					<view class="timeResidue">
						<view
							:class="{ timeList: allIndex == index }"
							v-for="(item, index) in allDate"
							:key="index"
							@click="allClick(item, index)"
							>{{ item.startTime }}</view
						>
					</view>
				</view>
				<!-- </view> -->
			</view>
			<view v-else> 该日期无排班日期 </view>
		</view>

		<!-- 立即预约 -->
		<view class="bottomBox">
			<view>
				<text style="font-size: 30rpx; font-weight: bold">
					{{ dateList.name == '' ? '' : '您选择的时间为：' }}</text
				>
				{{ dateList.name == '' ? '请选择要预约的号源' : dateList.name }}</view
			>
			<view style="float: right"
				><u-button
					type="primary"
					:disabled="dateList.name == '' ? true : false"
					@click="makeClick"
					>立即预约</u-button
				></view
			>
		</view>
		<!-- 医生主页详情弹框 -->
		<view>
			<u-popup
				v-model="show"
				mode="bottom"
				border-radius="25"
				height="88%"
				close-icon="close"
				close-icon-pos="top-right"
			>
				<view class="pop_up">
					<view class="title">医师详情</view>
					<view class="name">
						<view><img :src="doctorMessage.doctorIcon" alt="" /></view>
						<view style="max-width: 80%">
							<view
								><text
									style="
										font-size: 18px;
										font-weight: bold;
										color: #299bff;
										margin-right: 5px;
									"
									>{{ doctorMessage.doctorName }}</text
								>{{ doctorMessage.position }}</view
							>
							<view
								style="
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								"
							>
								<!-- 西安交通大学第一附属医院 -->
								{{ doctorMessage.deptName }}</view
							>
						</view>
					</view>
					<view class="content">
						<view style="margin-top: 15px">
							<view class="adept"
								><u-icon
									name="plus-circle-fill"
									color="#5a95f9"
									size="50"
								></u-icon
								><view style="margin-left: 10rpx">擅长方向</view></view
							>
							<view class="introduce_C">{{ doctorMessage.doctorMajor }}</view>
						</view>
						<view style="margin-top: 15px">
							<view class="adept"
								><u-icon name="chat-fill" color="#0fa95a" size="50"></u-icon
								><view style="margin-left: 10rpx">简介</view></view
							>
							<view class="introduce_C">{{
								doctorMessage.briefIntroduction
							}}</view>
						</view>
						<view style="margin-top: 15px">
							<view class="adept"
								><u-icon name="home-fill" color="#5a95f9" size="50"></u-icon
								><view class="introduce_C">医院信息</view></view
							>
							<view style="display: flex"
								><u-icon name="map-fill" color="#000"></u-icon
								><view class="introduce_C">{{ parentOrgName }}</view></view
							>
							<!-- <view style="display: flex"
								><u-icon name="plus-circle-fill" color="#000"></u-icon
								><view class="introduce_C">西安市雁塔区</view></view
							> -->
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="safe"></view>
		<u-modal
			v-model="cannot"
			:content="content"
			show-cancel-button="false"
		></u-modal>
	</view>
</template>

<script>
import getTime from '../../utils/time'
import { selectRegistrationInfo } from '../../http/api.js'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			cannot: false,
			content: '当前时间已预约，请重新选择时间',
			heightData: '',
			newDate: '',
			showDate: false,
			show: false,
			idx: -1,
			forenoonIdx: -1,
			afternoonIdx: -1,
			allIndex: -1,
			// 医生信息
			doctorMessage: [],
			// disabled: true,
			dateList: {
				name: '',
				endTime: '',
			},
			// 全天
			allDate: [],
			// 夜间
			residue: [],
			// 上午
			forenoon: [],
			// 下午
			afternoon: [],
			doctorID: '',
			// parentOrgName: '',
			// timeQuantum: '',
			// 科室id
			KSid: '',
			// 挂号费用
			registrationFee: '',
			registerCategory: '',
			clinicId: '',
			clinicTimeId: '',
			// idCode: '',
			dateQuery: {},
			// 当前是否可预约
			// isAppointment: '',
			shiftData: '',
			//
			scheduleTimeSn: '',
			titleShow: false,
			itemCode: '',
			itemClass: '',
			deptID: '',
		}
	},
	onLoad(option) {
		let parameter = JSON.parse(option.parameter)
		let parentOrgName = JSON.parse(option.parentOrgName)
		console.log(parameter.doctorTitle, '科室iddidididi', parentOrgName)
		// this.idCode = parameter.idCode
		// this.parentOrgName = parameter.parentOrgName
		let doctorMessage = {
			orgCode: this.orgCode,
			idCode: parameter.idCode,
			deptName: parentOrgName.parentOrgName.orgName,
			doctorIcon: parameter.doctorIcon,
			doctorMajor: parameter.doctorMajor,
			doctorName: parameter.doctorName,
			position: parameter.position,
			remainderNum: parameter.remainderNum,
			briefIntroduction: parameter.briefIntroduction,
			clinicDate: parentOrgName.newDate,
			deptCode: parentOrgName.parentOrgName.orgCode,
			// this.newDate == '' ? getTime(1) : this.newDate,
		}
		this.deptID = parentOrgName.parentOrgName.id
		// 支付需要的字段
		this.itemCode = parameter.itemCode
		this.itemClass = parameter.itemClass
		this.newDate = parentOrgName.newDate
		this.dateQuery = doctorMessage
		// 科室id
		this.KSid = parentOrgName.id
		this.doctorID = parameter.id
		// 挂号费
		this.registrationFee = parameter.registrationFee
		this.registerCategory = parameter.doctorTitle
		// 修改日期默认选中当天时间
		this.$nextTick(() => {
			this.$refs.calendar.activeDate = parentOrgName.newDate
		})
		this.selectRegistrationInfoData(doctorMessage)
	},
	mounted() {
		// 获取底部安全区高度
		const dom = uni.createSelectorQuery().in(this)
		dom.select('#safe').boundingClientRect(data => {
			this.heightData = data.height
		})
	},
	computed: {
		...mapState({
			orgId: state => state.orgId,
			curHos: state => state.curHos,
			orgCode: state => state.orgCode,
		}),
	},
	methods: {
		getTime,
		selectRegistrationInfoData(parameter) {
			selectRegistrationInfo(parameter).then(({ data, head }) => {
				this.doctorMessage = data.ysxx
				this.idx = -1
				this.forenoonIdx = -1
				this.afternoonIdx = -1
				this.allIndex = -1
				if (
					head.code == 200 &&
					data.ghxx.timeList &&
					data.ghxx.timeList.length > 0
				) {
					// 全天
					this.allDate = []
					// 夜间
					this.residue = []
					// 上午
					this.forenoon = []
					// 下午
					this.afternoon = []
					this.titleShow = true
					data.ghxx.timeList.map(i => {
						if (i.shift == 'N') {
							// 夜间
							i.timeSlot &&
								i.timeSlot.map(i => {
									i.shift = 'N'
								})
							this.residue = i.timeSlot
							console.log(this.residue, '夜间')
						} else if (i.shift == 'A') {
							// 上午
							i.timeSlot &&
								i.timeSlot.map(i => {
									i.shift = 'A'
								})
							this.forenoon = i.timeSlot
							console.log(this.forenoon, '上午')
						} else if (i.shift == 'P') {
							// 下午
							i.timeSlot &&
								i.timeSlot.map(i => {
									i.shift = 'P'
								})
							this.afternoon = i.timeSlot
							console.log(this.afternoon, '下午')
						} else if (i.shift == 'F') {
							i.timeSlot &&
								i.timeSlot.map(i => {
									i.shift = 'F'
								})
							this.allDate = i.timeSlot
							console.log(this.allDate, '全天')
						}
					})
					console.log(data, '时间')
				} else {
					console.log(this.titleShow)
					this.titleShow = false
				}
			})
		},
		homepage() {
			this.show = true
		},
		publicParameter(item) {
			this.dateList.name = item.startTime
			this.dateList.endTime = item.endTime
			this.clinicId = item.clinicId
			this.clinicTimeId = item.clinicTimeId
			this.shiftData = item.shift
			this.scheduleTimeSn = item.timeSerialNumber
		},
		// 夜间
		timeClick(item, index) {
			this.idx = index
			this.afternoonIdx = -1
			this.forenoonIdx = -1
			this.allIndex = -1
			this.publicParameter(item)
		},
		// 上午
		forenoonClick(index, item) {
			this.idx = -1
			this.afternoonIdx = -1
			this.allIndex = -1
			this.forenoonIdx = index
			this.publicParameter(item)
		},
		// 下午
		afternoonClick(index, item) {
			this.forenoonIdx = -1
			this.idx = -1
			this.allIndex = -1
			this.afternoonIdx = index
			this.publicParameter(item)
		},
		// 全天
		allClick(item, index) {
			this.idx = -1
			this.afternoonIdx = -1
			this.forenoonIdx = -1
			this.allIndex = index
			console.log(index)
			this.publicParameter(item)
		},
		changeTime(e) {
			// 全天
			this.allDate = []
			// 夜间
			this.residue = []
			// 上午
			this.forenoon = []
			// 下午
			this.afternoon = []
			this.dateList.name = ''
			this.newDate = e.result
			this.dateQuery.clinicDate = this.newDate
			console.log(this.dateQuery, '切换时间')
			this.selectRegistrationInfoData(this.dateQuery)
		},
		makeClick() {
			let parameterList = {
				id: this.KSid,
				doctorMessage: this.doctorMessage,
				dateList: this.dateList,
				doctorID: this.doctorID,
				/**
				 * 就诊类型（0：专科、1：专病）
				 */
				visitType: '0',
				newDate: this.newDate == '' ? getTime(1) : this.newDate,
				registrationFee: this.registrationFee,
				// registerCategory: this.registerCategory,
				clinicId: this.clinicId,
				clinicTimeId: this.clinicTimeId,
				startTime: this.shiftData,
				timeSerialNumber: this.scheduleTimeSn,
				itemCode: this.itemCode,
				itemClass: this.itemClass,
				doctorTitle: this.registerCategory,
				deptID: this.deptID,
			}
			console.log(parameterList, '123131')
			uni.navigateTo({
				url: './confirm_make?parameter=' + JSON.stringify(parameterList),
			})
			// }
		},
	},
}
</script>

<style lang="scss" scoped>
.topStyle {
	width: 100%;
	height: 178rpx;
	background-color: #42a8ff;
	border-bottom-left-radius: 70px;
	border-bottom-right-radius: 70px;
}
.bigBox {
	height: 380rpx;
	display: flex;
	justify-content: center;
}
.Content {
	display: flex;
	padding: 15rpx;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 20rpx;
	position: absolute;
	width: 86%;
	top: 44px;
	background-color: #fff;
	-moz-box-shadow: 2px 2px 5px #333333;
	-webkit-box-shadow: 2px 2px 5px #333333;
	box-shadow: 2px 2px 5px #333333;

	.headImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: absolute;
		top: -23px;
		right: 11px;
	}
	.leftContent {
		width: 100%;
		.topRegistration {
			display: flex;
			align-items: center;
			.leftTitle {
				flex: 1;
				.sizeStyle {
					display: inline-block;
					width: 44rpx;
					text-align: center;
					background-color: #0089ff;
					color: aliceblue;
					margin-right: 4rpx;
				}
			}
		}
		.introduce {
			view {
				display: inline-block;
			}
			.box {
				margin-right: 20rpx;
			}
		}
		.beGood {
			display: flex;
			margin-top: 10rpx;
			padding-bottom: 9px;
			border-bottom: 1px solid #cccccc;
			margin-bottom: 20rpx;
			view {
				display: inline-block;
			}
			.conceal {
				width: 40%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-right: 10rpx;
			}
		}
		.men {
			color: #cccccc;
			view {
				display: inline-block;
			}
			.box {
				margin-right: 20rpx;
			}
		}
	}
}
.pop_up {
	height: 100%;
	padding: 0 20rpx;
	.title {
		font-size: 20px;
		padding: 15px;
		text-align: center;
	}
	.name {
		display: flex;
		background: linear-gradient(139deg, #baedff, #baedff, #a7e2fb, #a7e2fb);
		padding: 10px;
		border-radius: 13px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		view {
			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}
	.content {
		.adept {
			display: flex;
			font-size: 35rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}
	.introduce_C {
		color: #848484;
		margin-left: 10rpx;
	}
}
.timeResidue {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	margin-bottom: 80rpx;
	// justify-content: center;

	view {
		color: #056905;
		width: 15%;
		text-align: center;
		height: 35px;
		/* align-items: center; */
		line-height: 35px;
		background: rgb(240, 249, 2449);
		margin: 15px 15px;
		font-size: 13px;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}
	.timeList {
		background: #679dffcc;
	}
}
.bottomBox {
	width: 100%;
	// height: 90rpx;
	height: 130rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	padding: 0 15px;
	view {
		height: 100%;
		// width: 50%;
		float: left;
		line-height: 80rpx;
	}
}
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>